<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title><!--{$title}--></title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<link rel="stylesheet" href="<!--{$url_prefix}-->css/bootstrap.css" />
<link rel="stylesheet" href="<!--{$url_prefix}-->css/cikonss.css">
<link rel="stylesheet" href="<!--{$url_prefix}-->css/bootstrap-responsive.css" />
<link rel="stylesheet" href="<!--{$url_prefix}-->css/mediaelementplayer.css" />
<link rel="stylesheet" href="<!--{$url_prefix}-->css/music.css" />
<script src="<!--{$url_prefix}-->js/jquery.js"></script>
<script src="<!--{$url_prefix}-->js/bootstrap.js"></script>
<script src="<!--{$url_prefix}-->js/mediaelement-and-player.min.js"></script>
<!--[if lt IE 9]>
  <script src="<!--{$url_prefix}-->js/html5.js"></script>
<![endif]-->
<style>
audio{visibility:hidden}
</style>
<body>
<div class="main">
	<div class="container clearfix">
		<!-- 代码 开始 -->
		<div class="bc-social clearfix">
			<ul class="bc-social-buttons">
                <!--{foreach from = $song_class item = sc_i name = sc_n}-->
				    <li <!--{if $id_class eq $sc_i.id_class}-->class="active"<!--{/if}--> style="width: <!--{$width}-->%; ">
                        <a href="<!--{$url}-->/home/music_type/1/<!--{$class_type}-->/<!--{$sc_i.id_class}-->"><!--{$sc_i.name}--></a>
                    </li>
                <!--{/foreach}-->
			</ul>
		</div>

		<div class="tab-content">
			<div class="tab-pane active row-music" id="portlet_tab1" style="overflow:hidden">
			<!--{if !empty($slist)}-->
				<ul class="clearfix" id="song_list">

					<!--{foreach from=$slist item=st name=st}-->
					<li>
						
						<div class="clearfix kecaozuo" onclick="bind_play(this)">
							<!--{if $cpage eq 1 && $smarty.foreach.st.index < 3}-->
							<p class="num num0<!--{$smarty.foreach.st.index+1}-->">
							<!--{else}-->
							<p class="num num04">
							<!--{/if}-->
							<!--{$smarty.foreach.st.index+1+($cindex*$cpage)-$cindex}--></p>
							<p class="musicpic">
								<img src="<!--{$st.posters_url|get_img_url:song}-->" />
							</p>
							<input type="hidden" name="audiosrc" value="<!--{$st.song_url|get_img_url:song}-->" />
							<p class="listdectwo">
								<span><!--{$st.name}--></span>
							</p>
						</div>
						<div class="download"><!--{$st.singer|strip_tags}--></div>
						<div class="song left">
							<!--{$st.lyric}-->
						</div>
					</li>
					<!--{/foreach}-->
				</ul>
        <!--{else}-->
        暂无数据！
			<!--{/if}-->
				<input type="hidden" name="cpage" id="cpage" value="<!--{$cpage}-->" />
			</div>
			
			<div class="error_pop"></div>
			<div class="mplayer" style="display:none"></div>
		</div>
	</div>
	<!--提示信息弹出-->
	<!-- 代码 结束 -->
<footer>powered by <a href="http://www.it008.com" target="_blank">赏金猎人</a></footer>
</div>
</body>

<script type="text/javascript">
	var player;
	
	function bind_play(obj){
		$('.mplayer').hide();
		var pli = $(obj).parent('li');
		var asrc = $(obj).find('input[name="audiosrc"]').val();
		var osrc = $("#player2").attr('src');
		
		var point = asrc.lastIndexOf(".");
		var type = asrc.substr(point);
		var a_type = 'mpeg';
		if(type == '.wav'){
			a_type = 'wav';
		}else if(type == '.ogg'){
			a_type = 'ogg';
		}else if(type == '.mp3'){
			
		}else{
			$('.error_pop').text('您的浏览器不支持播放该歌曲').show();
			return false;
		}
		
		//alert('vv');
		if(pli.hasClass('playing')){
			//暂停歌曲，关闭div
			//alert(asrc);
			if(asrc == osrc){
				if(player){
					player.pause();
				}
			}else{
				if(player){
					player.play();
				}
			}
			pli.removeClass('playing');
		}else{
			//加载歌曲,暂开div
			pli.addClass('playing').siblings().removeClass('playing');
			if(asrc != osrc){
				player = null;
				if(!player){
					$('.mplayer').html('<audio id="player2" src="" type="audio/mp3" controls="controls" autoplay="true"></audio>');
					$("#player2").attr('src',asrc);
					player = new MediaElementPlayer('#player2',{
						//alwaysShowControls: true,
						//enableAutosize:true,
						//audioWidth:'100%',
						audioHeight: 45,
						features: ['playpause','progress','duration']
					});
				}
				player.play();
			}
			$('.mplayer').show();
		}
		
		/* var asrc = $(obj).find('input[name="audiosrc"]').val();
		if(asrc){
			$('.mplayer').show();
			$('.mplayer').html('<audio id="player2" src="" type="audio/mp3" controls="controls" autoplay="true"></audio>');
			$('#player2').attr('src',asrc);
			$('#player2').mediaelementplayer({
					alwaysShowControls: true,
					enableAutosize:true,
					audioWidth:'100%',
					audioHeight: 45,
					features: ['playpause','progress','duration']
				});
		} */
	}
	

	window.setInterval(function(){
		$('.error_pop').text('').hide();
	}, 3000);
	
	var flag = 0;
	
	$(document).ready(function(){
		// 给浏览器窗口绑定 scroll 事件
		$(window).bind("scroll",function(){
		    // 判断窗口的滚动条是否接近页面底部
		    if($(document).height() - $(window).height() - $(document).scrollTop() < 10 && flag == 0) {
                var page = parseInt($("#cpage").val())+1;
                flag = 1;
                 $.ajax({
                    url: '<!--{$url}-->/home/test/'+page + '/<!--{$id_class}-->',
                    type: "get",
                    success: function(data) {
                        result = $(data).find("#song_list");
                        nexpage = $(data).find("#cpage").val();
                        if(nexpage){
                            $("#cpage").val(nexpage);
                        }
                       if(result.get(0) != undefined){
                           $("#song_list").append(result);
                           flag = 0;
                       }else{
                           $('.error_pop').text('没有数据了').show();
                       }
                    }
                });
		    }
		});
	});
</script>

</html>
